<style>
  .nav {
    background-color: #7b68eeca;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    height: 60px;
    width: 100vw;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 4px 6px 2px rgba(0, 0, 0, .2), 0 6px 30px 5px rgba(0, 0, 0, .12);
    z-index: 10;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
  }

  .nav > .title {
    margin: 0 10px;
    font-weight: bolder;
    color: aliceblue;
  }

  div.body {
    position: relative;
    width: 100vw;
    height: 100%;
  }

  .loading-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 12;
    height: 3px;
  }

  button.menu-link{
    display: block;
    width: 100%;
    height: 50px;
    font-size: 16px;
  }
  button.menu-link i{
    font-size: 18px;
  }
  button.menu-link .button-wrapper{
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .side-bar{
    width: 360px;
    padding: 20px 0;
  }

  mat-drawer{
    /*box-shadow: 0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%)*/
  }
</style>
<nav class="nav">
  <button mat-button><i nz-icon (click)="drawer.toggle()" style="font-size: 38px;">
    <svg t="1610288265610" class="icon" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg" p-id="5665">
      <path
        d="M404 628.6c8.4 28 35.2 48.3 66.2 48.3 38 0 69-30.8 69-68.6s-31-68.6-69-68.6c-31.7 0-58.4 21-66.9 49.7H199.2c-8.7-29.5-36-49.7-66.9-49.7-38.7 0-69 30.8-69 68.6s31 68.6 69 68.6c31 0 57-20.3 66.2-48.3H404z m354.8-367.3h56.3v39.9h-56.3v-39.9z m72.5 0h56.3v39.9h-56.3v-39.9z m-428 569.5h56.3v39.9h-56.3v-39.9z m72.5 0h56.3v39.9h-56.3v-39.9z m73.3 0h56.3v39.9h-56.3v-39.9z"
        p-id="5666" fill="#ea9518"></path>
      <path
        d="M206.7 528h58v42.5h-58V528z m74.7 0h58v42.5h-58V528z m74.7 0h58v42.5h-58V528z m251.7 13.4h58v42.5h-58v-42.5z m75.4 0h58v42.5h-58v-42.5z m74.7 0h58v42.5h-58v-42.5zM258.2 153.8h58v42.5h-58v-42.5z m74.7 0h58v42.5h-58v-42.5z m74.7 0h58v42.5h-58v-42.5z"
        p-id="5667" fill="#ea9518"></path>
      <path
        d="M132.8 290c30.8 0 56.6-19.5 66.6-45.4h161.8c8.6 0 22.9 6.3 27.9 12.6L485 404.5c13.6 20.2 43 31.4 63.7 31.4h96.7c10.7 24.4 35.8 40.5 64.4 40.5 38.7 0 70.2-30.7 70.2-68.4s-31.5-68.4-70.2-68.4c-35.1 0-63.7 24.4-69.5 56.6h-90.9c-10 0-25.1-6.3-29.4-12.6l-95-146.7c-12.9-20.9-40.1-30-61.6-30H202.3c-7.2-30.7-35.1-53.1-68.7-53.1-38.7 0-70.2 30.7-70.2 68.4-1.5 37 30.1 67.8 69.4 67.8z"
        p-id="5668" fill="#ea9518"></path>
      <path
        d="M547.7 331.2c29.5 0 54.7-18 65.5-43.8h133.1v-40.9H617.5c-6.5-32.3-35.3-56.7-69.8-56.7-38.9 0-70.5 31.6-70.5 70.4-0.8 39.4 30.9 71 70.5 71z m-159.1 82.6c0-38.8-31.7-70.4-70.5-70.4s-70.5 31.6-70.5 70.4c0 39.5 31.7 70.4 70.5 70.4 38.1 0.7 70.5-30.9 70.5-70.4z m499.5 134.3c-32.4 0-59.7 21.5-68.4 51.7H687.3c-21.6 0-47.5 2.9-61.9 23.7L529 767.2c-4.3 6.5-18.7 12.9-29.5 12.9H380.7c-8.6-28.7-36-50.3-67.6-50.3-38.9 0-70.5 31.6-70.5 70.4 0 39.5 31.7 70.4 70.5 70.4 32.4 0 59-21.5 68.4-50.3h118c21.6 0 51.1-10.1 64.1-30.9L660 645.7c0.7-0.7 4.3-5 28.1-5H822c9.4 28 36 47.4 66.9 47.4 39.6 0 70.5-31.6 70.5-70.4-0.1-38-31.7-69.6-71.3-69.6z"
        p-id="5669" fill="#ea9518"></path>
      <path
        d="M708.5 727.3c-39.5 0-71.7 32.2-71.7 71.7s32.2 71.7 71.7 71.7 71.7-32.2 71.7-71.7c-0.1-39.6-32.2-71.7-71.7-71.7z"
        p-id="5670" fill="#ea9518"></path>
    </svg>
  </i>
  </button>
  <h1 class="title">Data Flow Manager</h1>
  <mat-progress-bar *ngIf="app.showLoadingBarSubject | async" class="loading-bar" mode="query"></mat-progress-bar>
</nav>
<div class="body">
  <div style="height: 60px"></div>
  <mat-drawer-container class="example-container" hasBackdrop="false">
    <mat-drawer class="side-bar" #drawer mode="push" [autoFocus]="false">
      <button class="menu-link" *ngFor="let i of toolButtonGroup.childViews.slice(1)" mat-button [routerLink]="i.name">
        <div class="button-wrapper"><i nz-icon [nzType]="i.icon"></i>&nbsp;&nbsp;{{i.description}}</div>
      </button>
    </mat-drawer>
    <mat-drawer-content style="height: calc(100vh - 60px); overflow: auto">
      <router-outlet (deactivate)="routeLoading = true" (activate)="routeLoading=false">

      </router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>

</div>
<app-tool-button-group #toolButtonGroup></app-tool-button-group>
